<template>
    <div class="container">
        <div class="row">
            <span class="number first">{{item.detailByDay}}</span>
            <span class="number first">{{item.alarmByDay}}</span>
        </div>
        <div class="row">
            <span class="number second">{{item.detailByMonth}}</span>
        </div>
        <div class="row">
            <span class="number third">{{item.alarmBySerious}}</span>
            <span class="number third">{{item.alarmByUrgent}}</span>
        </div>
    </div>
</template>
<script>
export default {
    name: 'DetailNumber',
    props: {
        item: Object
    }
};
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    background: url('../assets/img/detail-background.png');
    background-size: 100% 100%;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.7rem;
}
.row {
    flex-basis: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.row:nth-child(2) {
    justify-content: center;
}
.first {
    margin-top: 1.2rem;
}
.second {
    margin-bottom: 0.2rem;
}
.third {
    margin-bottom: 0.9rem;
}
.first:nth-child(1) {
    color: rgb(155, 248, 4);
}
.first:nth-child(2){
    color: #49c7f8;
}
.third:nth-child(1){
    color: red;
}
.third:nth-child(2){
    color: rgb(255, 115, 0);
}
.second{
    color: #49c7f8;
}

</style>
